<template>
  <div id="app">
    <h2>测试题</h2>
    <div>
      <!-- 接受事件correct-answer -->
      <SubjectItem
        v-for="(question, index) in questions"
        :key="index"
        @correct-answer="markCorrect(index)"
        @wrong-answer="markWrong(index)"
      ></SubjectItem>
    </div>
    <div>
      <FlagItem
        v-for="(status, index) in statuses"
        :key="index"
        :index="index"
        :status="status"
      ></FlagItem>
    </div>
  </div>
</template>

<script>
import SubjectItem from './components/SubjectItem.vue';
import FlagItem from './components/FlagItem.vue';

export default {
  components: {
    SubjectItem,
    FlagItem
  },
  data() {
    return {
      questions: Array.from({ length: 5 }, () => {}),
      statuses: Array.from({ length: 5 }, () => '未完成')
    };
  },
  methods: {
    markCorrect(index) {
      this.$set(this.statuses, index, '回答正确');
    },
    markWrong(index) {
      this.$set(this.statuses, index, '回答错误');
    }
  }
};
</script>


<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>